<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>码客学员信息系统</title>
	<link rel="stylesheet" type="text/css" href="index.css">
	<style type="text/css"></style>
</head>
<body>
<!-- LOGO -->
<div class="head_area">
	<img src="01.png">
</div>
<!-- 表单 -->
<form class="search_form">
	<div class="search_area">
		<input type="text" name="student" placeholder="请输入学员姓名">
		<button>点击查询</button>
	</div>
</form>
<!-- 信息列表 -->
<ul class="list_area">
	<li>
		<a href="#">
			<div class="list_title">
				<span>有关学生行为规范注意事项...</span>
				<span>2018-02-22</span>
			</div>
			<p>
				公告内容公告内容公告内容公告内容公告内容公告内容公告内容公告内容公告内容公告内容
			</p>
		</a>
	</li>
	<li>
		<a href="#">
			<div class="list_title">
				<span>有关学生行为规范注意事项...</span>
				<span>2018-02-22</span>
			</div>
			<p>
				公告内容公告内容公告内容公告内容公告内容公告内容公告内容公告内容公告内容公告内容
				
			</p>
		</a>
	</li>
	<li>
		<a href="#">
			<div class="list_title">
				<span>有关学生行为规范注意事项...</span>
				<span>2018-02-22</span>
			</div>
			<p>
				公告内容公告内容公告内容公告内容公告内容公告内容公告内容公告内容公告内容公告内容
				
			</p>
		</a>
	</li>
	<li>
		<a href="#">
			<div class="list_title">
				<span>有关学生行为规范注意事项...</span>
				<span>2018-02-22</span>
			</div>
			<p>
				公告内容公告内容公告内容公告内容公告内容公告内容公告内容公告内容公告内容公告内容
				
			</p>
		</a>
	</li>
	<li>
		<a href="#">
			<div class="list_title">
				<span>有关学生行为规范注意事项...</span>
				<span>2018-02-22</span>
			</div>
			<p>
				公告内容公告内容公告内容公告内容公告内容公告内容公告内容公告内容公告内容公告内容
				
			</p>
		</a>
	</li>
	<li>
		<a href="#">
			<div class="list_title">
				<span>有关学生行为规范注意事项...</span>
				<span>2018-02-22</span>
			</div>
			<p>
				公告内容公告内容公告内容公告内容公告内容公告内容公告内容公告内容公告内容公告内容
				
			</p>
		</a>
	</li>
	<li>
		<a href="#">
			<div class="list_title">
				<span>有关学生行为规范注意事项...</span>
				<span>2018-02-22</span>
			</div>
			<p>
				公告内容公告内容公告内容公告内容公告内容公告内容公告内容公告内容公告内容公告内容
				
			</p>
		</a>
	</li>
	<li>
		<a href="#">
			<div class="list_title">
				<span>有关学生行为规范注意事项...</span>
				<span>2018-02-22</span>
			</div>
			<p>
				公告内容公告内容公告内容公告内容公告内容公告内容公告内容公告内容公告内容公告内容
				
			</p>
		</a>
	</li>
</ul>

<script type="text/javascript">
	//判断屏幕尺寸
	function Rem() {
	    var docEl = document.documentElement,
	        oSize = docEl.clientWidth / 7.5;
	    if(oSize > 85) {
	        oSize = 85; //  限制rem值   640 / 7.5 ≈ 85
	    }

	    docEl.style.fontSize = oSize + 'px';
	}
	window.addEventListener('resize', Rem, false);
	Rem();
	//判断屏幕尺寸End
</script>
</body>
</html>